import React from 'react';

import { Link } from 'umi';

import tab from './Tab.less';

interface Props { }
const Chnagbody = () => {
  let body = document.body;
  console.log(body);
  if (!(body.classList.contains('dark'))) {
    console.log(777)
    body.className = 'dark'
  } else {
    body.classList.remove('dark')
  }

}
function Tab(props: Props) {
  const { } = props

  return (
    <div className={tab.header}>
      <div className='container'>
        <div className={tab.logo}>
          <a href="/">
            <img height='64px' src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="" />
          </a>
        </div>
        <nav>
          <ul >
            <li>
              <Link className={tab.link} to="/article">
                <span>文章</span>
              </Link>
            </li>
            <li>
              <Link className={tab.link} to="/archives">
                <span>归档</span>
              </Link>
            </li>
            <li>
              <Link className={tab.link} to="/knowledge">
                <span>知识小结</span>
              </Link>
            </li>
            <li>
              <Link className={tab.link} to="/page/msgboard">
                <span>留言板</span>
              </Link> </li>
            <li><Link className={tab.link} to="/page/about">
              <span>关于</span>
            </Link></li>
            <li className={tab.uli}>
              <span role="img" aria-label="search" tabIndex={-1} className={tab.search}>
                <svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                  <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
                  </path>
                </svg>
              </span>
            </li>
            <li className={tab.uli} onClick={Chnagbody}>
              <div className={tab.bak}>
                <span className={tab.span_1}></span>
                <span className={tab.span_2}></span>
                <small className={tab.small}></small>
                <small className={tab.small}></small>
                <small className={tab.small}></small>
                <small className={tab.small}></small>
                <small className={tab.small}></small>
                <small className={tab.small}></small>
              </div>
            </li>
            <li className={tab.uli}>
              <div className={tab.svga}>
                <svg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'>
                  <path d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z" fill="currentColor"></path>
                </svg>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  )
}

export default Tab
